<template>
    <div class="login">
        <div class="login-header">
            <i class="iconfont icon-fanhui" v-on:click="goback"></i>
        </div>
        <div class="login-box">
            <div class="text">账号密码登录</div>
            <div class="login-form">
                <div class="account-box">
                    <input type="text" placeholder="输入账号" v-model="va">
                </div>
                <div class="password-box">
                    <input type="text" placeholder="输入密码" v-model="vp">
                </div>
                <div class="btn-box">
                    <button v-on:click="isclick">登录</button>
                </div>
            </div>
            <div class="tip" v-if="isfalse">{{isfalse== true ? '账号或密码错误':'登录成功'}}</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            isfalse:false,
            va:'',
            vp:''
        }
    },
    methods:{
        goback(){
            this.$router.go(-1);
        },
        isclick(){
            if(this.va.length > 0 && this.vp.length > 0){
                let flag = JSON.parse(localStorage.getItem('isLogin'));
                flag = true;
                localStorage.setItem('isLogin',JSON.stringify(flag));
                this.$router.push('/person')
            }else{
                this.va = '';
                this.vp = '';
                this.isfalse = true;
                let _this = this;
                setTimeout(() => {
                    _this.isfalse = false;
                }, 1000);
            }
        }
    },
}
</script>
<style lang="scss">
@import url("../assets/css/style.css");
.login{
    width: 100%;
    // height: 100%;
    
    background: url(../assets/img/cook.png);
    background-repeat: no-repeat;
    background-size: cover;
    // background-image: linear-gradient(to right,red,blue);
    // background-position: center;
    box-sizing: border-box;
    .login-header{
        height: 30px;
        padding: 0 10px;
        margin-top: 10px;
        box-sizing: border-box;
        margin-bottom: 100px;
        i{
            height: 30px;
            line-height: 30px;
            font-size: 30px;
            text-align: center;
        }
    }
    .login-box{
        width: 100%;
        position: relative;
        .text{
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 10px;
        }
        .login-form{
            width: 100%;
            // background-color: red;
            position: relative;
            .account-box{
                // height: 30px;
                font-size: 0;

                input{
                    padding-left: 10px;
                    font-size: 16px;
                    margin: 10px auto;
                    display: block;
                    height: 30px;
                    width: 200px;
                    border: 1px solid transparent;
                    border-color: black;
                    box-sizing: border-box;
                    &:focus{
                        border-color: black;
                        outline: none;
                    }
                }
            }
            .password-box{
                
                height: 30px;
                font-size: 0;
                input{
                    padding-left: 10px;
                    font: size 16px;
                    margin: 0 auto;
                    display: block;
                    height: 30px;
                    width: 200px;
                    border: 1px solid transparent;
                    border-color: black;
                    box-sizing: border-box;
                    &:focus{
                        border-color: black;
                        outline: none;
                    }
                }
            }
            .btn-box{
                width: 100%;
                button{

                    display: block;
                    margin: 10px auto;
                    width: 80px;
                    height: 30px;
                    border-radius: 5px;
                    background-color: white;
                    
                }
            }
            
        }
        .tip{
                height: 30px;
                margin: 0 auto;
                // background-color: red;
                text-align: center;
                font-size: 20px;
            }
    }

}
</style>